<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta userName="viewport" content="width=device-width, initial-scale=1">
    <title>徐州精诚特卫保安服务有限公司</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/attendanceClassManager.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/style.js"></script>
    <script src="js/attendanceClassManager.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $(":checkbox").change(function(){
        var index = $(this).attr('data-column')-1;
        $('tr').find('td:eq('+index+')').toggle();
    });
        });
    </script>
    <script>
        var idTmr;
        function  getExplorer() {
            var explorer = window.navigator.userAgent ;
            //ie
            if (explorer.indexOf("MSIE") >= 0) {
                return 'ie';
            }
            //firefox
            else if (explorer.indexOf("Firefox") >= 0) {
                return 'Firefox';
            }
            //Chrome
            else if(explorer.indexOf("Chrome") >= 0){
                return 'Chrome';
            }
            //Opera
            else if(explorer.indexOf("Opera") >= 0){
                return 'Opera';
            }
            //Safari
            else if(explorer.indexOf("Safari") >= 0){
                return 'Safari';
            }
        }
        function method5(tableid) {
            if(getExplorer()=='ie')
            {
                var curTbl = document.getElementById(tableid);
                var oXL = new ActiveXObject("Excel.Application");
                var oWB = oXL.Workbooks.Add();
                var xlsheet = oWB.Worksheets(1);
                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);
                sel.select();
                sel.execCommand("Copy");
                xlsheet.Paste();
                oXL.Visible = true;

                try {
                    var fname = oXL.Application.GetSaveAsFilename("Excel", "Excel Spreadsheets (*.xls), *.xls");
                } catch (e) {
                    print("Nested catch caught " + e);
                } finally {
                    oWB.SaveAs(fname);
                    oWB.Close(savechanges = false);
                    oXL.Quit();
                    oXL = null;
                    idTmr = window.setInterval("Cleanup();", 1);
                }

            }
            else
            {
                tableToExcel(tableid)
            }
        }
        function Cleanup() {
            window.clearInterval(idTmr);
            CollectGarbage();
        }
        var tableToExcel = (function() {
            var uri = 'data:application/vnd.ms-excel;base64,',
                    template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',
                    base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
                    format = function(s, c) {
                        return s.replace(/{(\w+)}/g,
                                function(m, p) { return c[p]; }) }
            return function(table, userName) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = {worksheet: userName || 'Worksheet', table: table.innerHTML}
                window.location.href = uri + base64(format(template, ctx))
            }
        })()
    </script>
    
    <style type="text/css" rel="style">
    .leftside{
        width:30%;
        float:left;
    }
    .rightside{
        width:25%;
        float:right;
    }
    .showcolum{
    margin-top: 6px;
    border: 1px solid gray;
    }
    .mytable{
    margin-top: 20px;

    }
    .mytable table th{
    text-align: center;
    color: #666;
    }
    .mytable table tr{
    text-align: center;
    }
    .tip2{
    padding:5px;
    width:6%;
    height:40px;
    float:left;
    }
    .cb_content2{
    padding:5px;
    width:34%;
    height:40px;
    }
    .cb_content3{
    padding:5px;
    width:55%;
    height:40px;
    float:right;
    }

    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">OA系统</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="personnelAnalysis.html">人事管理</a></li>
                <li class="active"><a href="marketingManager.html">营销管理</a></li>
                <li><a href="operationProjectManager.html">运营管理</a></li>
                <li><a href="financialManager.html">财务管理</a></li>
                <li><a href="warehouseCheck.html">采购管理</a></li>
                <li><a href="ManageDepartment.html">基本设置</a></li>
            </ul>
        </div>
    </div>
</nav>
<div id="" class="container-fluid  main-body">
    <div id="left-nav" class="">
        <div class="left-nav-userInfo">
            <div class="userHead">
                <img class="userImg" src="imgs/user.png">
            </div>
            <div class="userTitle">
                <p></p><span class="glyphicon glyphicon-log-out" data-toggle="tooltip" data-placement="top" title="注销" onclick="logout()" aria-hidden="true"></span>
            </div>
        </div>
        <ul class="left-nav-menu">
            <li class="left-nav-menu-li">
                <a href="marketingManager.html" class="menu-link">
                    <img src="imgs/task.png">
                    <div>考勤首页</div>
                </a>
            </li>
            <li class="left-nav-menu-li">
                <a class="menu-link">
                    <img src="imgs/brush.png">
                    <div>考勤设置    <span class="glyphicon glyphicon-triangle-right"></span></div>
                </a>
                <ul class="sub-menu none">
                    <li class="sub-menu-li">
                        <a href="attendanceGroupManager.html" class="sub-menu-link">
                            考勤组管理
                        </a>
                    </li>
                    <li class="sub-menu-li">
                        <a href="attendanceClassManager.html" class="sub-menu-link">
                            班次管理
                        </a>
                    </li>
                    <li class="sub-menu-li none">
                        <a href="attendanceJiaBan.html" class="sub-menu-link">
                            加班规则
                        </a>
                    </li>
                </ul>
            </li>
            <li class="left-nav-menu-li">
                <a class="menu-link">
                    <img src="imgs/brush_fill.png">
                    <div>考勤统计    <span class="glyphicon glyphicon-triangle-bottom"></span></div>
                </a>
                <ul class="sub-menu">
                    <li class="sub-menu-li">
                        <a href="attendanceMonthSummary.html" class="sub-menu-link">
                            月度汇总
                        </a>
                    </li>
                    <li class="sub-menu-li">
                        <a href="attendanceDailyStatistics.html" class="sub-menu-link">
                            每日统计
                        </a>
                    </li>
                    <li class="sub-menu-li  sub-li-active none">
                        <a href="attendancePunchTime.html" class="sub-menu-link">
                            打卡时间
                        </a>
                    </li>
                    <li class="sub-menu-li">
                        <a href="attendanceOriginalRecord.html" class="sub-menu-link">
                            原始记录
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="right-panel">
        <div class="nav-path">
            <div class="path-title">
                <ul class="path-ul">
                    <li>打卡时间</li>
                </ul>
            </div>
        </div>

        <div class="main-body-content">
            <div class="top-body" style="margin-top: 10px">
                <div class="row show-grid">
                    <div class="col-xs-1">
                        时间：
                    </div>
                    <div class="col-xs-3">
                    <input type="date" value="2018-06-1"/>&nbsp;至&nbsp;<input type="date" value="2018-06-2"/>
                   </div>
                   <div class="col-xs-5">
                    部门/人员：
                    <button class="btn btn-default" data-toggle="modal" data-target="#mymodal" type="button">全公司&nbsp;<img src="imgs/list.png" width="18px" height="18px"></button>
                    <label>
                    <input type="checkbox">&nbsp;离职员工（保留员工）</label>
                    </div>
               </div>
            </div>

            <div class="col-xs-12">
            <hr/>
            </div>

            <div>
                <div class="leftside">
                    <div class="col-xs-4">
                        <button class="btn btn-default" type="button" onclick="method5('tableExcel')" >
                           导出报表
                        </button> 
                    </div>
                </div>
                <div class="rightside">
                    <span><a>查看教学视频</a></span><span>|<a>下载说明手册</a></span>
                </div>
            </div>

            <div class="mytable">
                <table id="tableExcel" class="table table-bordered">
                    <thead style="background-color: #F9FAFB">
                    <tr class="table-tr">
                        <td>姓名</td>
                        <td>部门</td>
                        <td>工号</td>
                        <td>职位</td>
                        <td>五</td>
                        <td>六</td>

                    </tr>
                    </thead>
                    <tbody>
                    <tr >
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr >
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr >
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr >
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr >
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr >
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr >
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    </tbody>
                </table>
            </div>  
        </div>

        

    </div>
</div>

<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">选择部门与人员</h4>
            </div>

            <div class="modal-body" style="padding: 15px 20px;font-size: 12px">
                <form class="form-horizontal">  
                    <div class="form-group">
                       <table width='500' border='1' cellpadding='0' cellspacing='0'>
                        <tr>
                        <td width='45%' align="center"><select id='source' multiple="multiple" style="width:40%; height:100%" ondblclick="MoveTo(this.selectedIndex)">
                        <option value='1'>Item1</option>
                        <option value='2'>Item2</option>
                        <option value='3'>Item3</option>
                        <option value='4'>Item4</option>
                        <option value='5'>Item5</option>
                        <option value='6'>Item6</option>
                        </select></td>
                        <td width='10%' align="center"><input type="button" value=">>" onclick="MoveTo()" /><br /><input type="button" value="<<" onclick="MoveBack()" /></td>
                        <td width='45%'><select id='distinct' ondblclick="MoveBack(this.selectedIndex)" style="width:40%; height:100%" multiple="multiple" align="center"></select></td>
                        </tr>
                        </table>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div >
</body>
</html>